<template>
	<view class="container">
		<view class="body flex-c">
			<text class="title">首次登录需绑定手机号</text>
			<text class="des text-regular color-grey">为了您的账户安全，请绑定手机号</text>
			<form ref="form" class="form">
				<view class="input-box">
					<input class="input text-regular" name="phone" type="number" placeholder="请输入手机号" placeholder-style="color:#B3B3B3;" v-model="phone" @input="inputPhone" :maxlength="11"/>
				</view>
				<view class="input-box flex-r ac mt20">
					<input class="input text-regular" name="smscode" type="number" placeholder="请输入验证码" placeholder-style="color:#B3B3B3;" v-model="smscode" @input="inputCode" :focus="codefocus" :maxlength="6"/>
					<text class="text-regular color-blue" @tap="sendSMS">{{sendText}}</text>
				</view>
				<view class="submit-box">
					<button type="default" :class="{'active': canSubmit}" @tap="submitBind" :loading="loading">立即绑定</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import imMsg from "@/utils/common/message.js";
	export default {
		data() {
			return {
				phone: '', //手机号
				smscode: '', //验证码
				
				codefocus: false, //验证码输入框聚焦
				isSend: false, //验证码发送状态
				isSubmit: false, //是否已经提交
				loading: false ,//加载状态
				
				sendText: '获取验证码', //发送验证码提示文字
			}
		},
		computed:{
			user() {
				return this.$store.state.user
			},
			canSend() {
				return this.phone != '' && this.phone.length == 11 && /^[1][3-9][\d]{9}/.test(this.phone)
			},
			canSubmit() {
				return this.canSend && this.smscode != '' && this.smscode.length == 6 && this.oauthId
			}
		},
		onLoad() {
			if(this.user && this.user.is_bind_phone){
				this.$Router.pushTab({name: 'index'})
				return
			}
			if(this.$Route.query.oauthId){
				this.oauthId = this.$Route.query.oauthId
			}else{
				this.$Router.pushTab({name: 'index'})
				return
			}
			this.redirectTo = this.$CHS.getRedirectTo()
		},
		onUnload() {
			if(this.timer){
				clearInterval(this.timer)
				this.timer = null
			}
		},
		methods: {
			//发送短信验证码
			sendSMS() {
				if(!this.canSend){ //确认是否输入正确的手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return
				}
				if(this.isSend){ //防止重复发送
					return
				}
				this.isSend = true
				this.sendText = '发送中...'
				this.$CHS.sendSmsCode({
					phone: this.phone,
					term: 'user',
					type: 0 //0 .登录模板、1.注册模板、2.忘记密码模板
				}).then((res)=>{
					let time = 60
					this.sendText = '重新获取 ' + time + 's'
					this.timer = setInterval(()=>{
						time = time - 1
						if(time === 0){
							clearInterval(this.timer)
							this.isSend = false
							this.timer = null
							this.sendText = '获取验证码'
						}else{
							this.sendText = '重新获取 ' + time + 's'
						}
					}, 1000)
					this.codefocus = true
				}).catch((err)=>{
					this.isSend = false
					this.sendText = '获取验证码'
				})
			},
			//提交绑定
			submitBind(){
				if(this.isSubmit || !this.canSubmit || !this.oauthId) {
					return
				}
				this.isSubmit = true
				this.loading  = true
				//设置专家邀请码
				let loginModel = this.$CHS.getInviteCode()
				this.$http.post({
					url: '/api/oauth/mobile',
					data:{
						code: this.smscode,
						oauthId: this.oauthId,
						phone: this.phone,
						...loginModel
					}
				}).then((data)=>{
					if(data.success && data.result){
						//保存用户信息
						this.$store.commit('SET_USERINFO', data.result)
						//延迟跳转首页
						setTimeout(()=>{
							//更新IM用户资料
							imMsg.login(data.result.userInfo).then((ready) => {
								this.isSubmit = false
								//绑定成功提示
								this.$ShowToast({text: '手机号绑定成功'})
								//查询优惠活动
								this.$CHS.getCouponActivity(data.result.userInfo.userId)
								//跳转网址
								if(data.result.userInfo.isFirstRegistration == true){
									this.$Router.replaceAll({name: 'followseason'})
								}else if(this.redirectTo){
									this.$Router.replaceAll(this.redirectTo)
								}else{
									this.$Router.replaceAll({name: 'index'})
								}
							}).catch((err)=>{
								this.isSubmit = false
								//登录提示
								this.$ShowToast({text: '登录失败，请重试', type: 2, time: 3})
								this.$store.commit('SET_USERINFO', {})
							})
						}, 200);
					}else{
						this.isSubmit = false
						if(data.code == 10077 || data.code == 10006){
							uni.showModal({
								title: '系统提示',
								content: '当前手机号绑定的帐号已注销，请输入新的手机号',
								showCancel: false,
								success: () => {
									this.phone = ''
									this.smscode = ''
								}
							})
						}else{
							uni.showModal({
								title: '系统提示',
								content: data.message,
								showCancel: false,
							})
						}
					}
					this.loading = false
				}).catch((err) => {
					this.isSubmit = false
					this.loading = false
					//失败提示
					uni.showToast({
						title: '绑定手机号失败，请稍后重试',
						icon: 'none'
					})
				})
			},
			//输入手机号
			inputPhone(e) {
				if(e.detail.value && e.detail.value.length == 11){
					if(/^[1][3-9][\d]{9}/.test(e.detail.value)){
						this.codefocus = true
					}else{
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					}
				}
			},
			//输入验证码
			inputCode(e) {
				if(e.detail.value && e.detail.value.length == 6){
					this.codefocus = false
					uni.hideKeyboard()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 148rpx 40rpx 0;
		background-color: #FFFFFF;
		min-height: var(--safe-height);
		box-sizing: border-box;
		.body {
			.title{
				font-size: 44rpx;
				font-weight: 500;
			}
			.des{
				margin-top: 30rpx;
			}
			.form{
				margin-top: 60rpx;
				.input-box{
					border-bottom: 1rpx solid #EDEDED;
					.input{
						flex: 2;
						border: none;
						height: 120rpx;
					}
					text{
						padding: 30rpx 0;
					}
				}
				.submit-box{
					margin-top: 80rpx;
				}
			}
		}
	}
</style>
